<template>
  <div>
    <div class="order_content">
      <div class="order_add">
        <div class="add_titleN">
          <div @click="changeAddTitIdx(1)" :style="addTitIdx == 1 ? 'color: #333;' : ''" class="tit1">新增二级代理商</div>
          <div @click="changeAddTitIdx(2)" :style="addTitIdx == 2 ? 'color: #333;' : ''" class="tit2">代理商列表明细
            <el-tooltip popper-class="atooltip" :offset="50" placement="right-end" effect="light">
              <div slot="content" class="msg-tip">
                <div>新增代理商审核通过后登录步骤：</div>
                <div>1.访问<span>https://yushiai.com.cn/</span></div>
                <div>2.点击<span>代理商登录</span></div>
                <img src="https://www.yushiai.com.cn/static/pic/2048314741.png" />
              </div>
              <img src="@/assets/img/ad-que.png"
                style="width: 16px;height: 16px;margin-left: 8px;margin-bottom: 5px;" />
            </el-tooltip>
          </div>
        </div>
        <div class="add_box" v-if="addTitIdx == 1">
          <div style="padding-left: 70px;padding-bottom: 34px;">
            <div style="font-size: 18px;color: #333333;margin-bottom: 16px;">代理商头像</div>
            <el-upload class="uploadTX" :headers="headers" drag name="image" :action="$baseURL + '/biz/uploadImgage'"
              multiple :on-success="handleTXSuccess" :show-file-list="false">
              <img v-if="imageTX" :src="$staticURL + imageTX" class="img-tx">
              <img class="img-tx" src="@/assets/img/ad-up.png" />
            </el-upload>
          </div>
          <el-form :model="form" label-width="auto" :label-position="'left'">
            <el-form-item label="代理商名称：">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="详细地址：">
              <el-input v-model="form.addressDetail"></el-input>
            </el-form-item>
            <el-form-item label="邮箱：">
              <el-input v-model="form.contactEmail"></el-input>
            </el-form-item>
            <el-form-item label="联系人名称：">
              <el-input v-model="form.contactName"></el-input>
            </el-form-item>
            <el-form-item label="联系电话：">
              <el-input v-model="form.contactPhone"></el-input>
            </el-form-item>
            <!-- <el-form-item label="支付宝账号：">
              <el-input v-model="form.phone1"></el-input>
            </el-form-item> -->
            <el-form-item label="代理区县：">
              <div style="display: flex;align-items: center;">
                <!-- <el-select v-model="province" disabled placeholder="请选择省" style="margin-right: 20px;width: 100px;">
                    <el-option v-for="item in Area" :key="item.value" :label="item.label" :value="item">
                    </el-option>
                  </el-select> -->
                <el-select v-model="cityQuery" disabled placeholder="请选择市" style="min-width: 100px;">
                  <el-option disabled :label="cityQuery" :value="cityQuery">
                  </el-option>
                </el-select>
                <el-select v-model="cityas" @change="handleCityChange" placeholder="请选择区" style="min-width: 100px;">
                  <el-option v-for="(item,index) in city" :key="index" :label="item.label" :value="item.label">
                  </el-option>
                </el-select>
              </div>
            </el-form-item>
            <el-form-item label="设置账号：">
              <el-input v-model="form.userName"></el-input>
            </el-form-item>
            <el-form-item label="设置密码：">
              <el-input v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item label="联系人身份证号：">
              <el-input v-model="form.idCard"></el-input>
            </el-form-item>
            <el-form-item label="营业执照：" style="max-width: 100%;flex-direction: column;">
              <el-upload class="uploadEL" drag name="image" :action="$baseURL + '/biz/uploadImgage'" :headers="headers"
                multiple :on-success="handleAvatarSuccess" :show-file-list="false">
                <img v-if="imageUrl || licenseUrl" :src="licenseUrl ? $staticURL + licenseUrl : imageUrl"
                  class="uploadELImg">
                <img v-else style="box-shadow: 0 0 1px 1px #ccc;border-radius: 8px;" src="@/assets/img/upload_img1.png">
              </el-upload>
            </el-form-item>
            <el-form-item label="法人身份证正反面：" style="max-width: 100%;flex-direction: column;">
              <el-upload class="uploadEL" drag name="image" :action="$baseURL + '/biz/uploadImgage'" :headers="headers"
                multiple :on-success="handleAvatarSuccessFront" :show-file-list="false">
                <img v-if="imageUrlFront || idcardFront" :src="idcardFront ? $staticURL + idcardFront : imageUrlFront"
                  class="uploadELImg">
                <img v-else style="box-shadow: 0 0 1px 1px #ccc;border-radius: 8px;" src="@/assets/img/upload_img2.png">
                <div slot="tip">请上传身份证正面照片</div>
              </el-upload>
              <el-upload class="uploadEL" drag name="image" :action="$baseURL + '/biz/uploadImgage'" :headers="headers"
                multiple :on-success="handleAvatarSuccessBack" :show-file-list="false">
                <img v-if="imageUrlBack || idcardBack" :src="idcardBack ? $staticURL + idcardBack : imageUrlBack"
                  class="uploadELImg">
                <img v-else style="box-shadow: 0 0 1px 1px #ccc;border-radius: 8px;" src="@/assets/img/upload_img3.png">
                <div slot="tip">请上传身份证背面照片</div>
              </el-upload>
            </el-form-item>
          </el-form>
          <div class="agree_box">
            <el-checkbox v-model="checked" style="margin-right:4px;"></el-checkbox>
            同意<span @click="openUrl('https://yushiai.com.cn/userAgreement?_id=6')">《广告法》</span>和<span
              @click="openUrl('https://yushiai.com.cn/privacyPolicy')">《隐私政策》</span>
          </div>
          <div style="text-align: center;margin-top: 20px;" @click="getRegister">
            <el-button class="add_btn">提交审核</el-button>
          </div>
        </div>

        <div v-else>
          <el-card shadow="always" :body-style="{ padding: '0' }" class="detail_card">
            <div class="dc1-top">
              <div v-for="(item, index) in tabList" style="width: 20%;margin-left: 50px;" :key="index">{{ item }}</div>
            </div>
            <div style="display: flex;align-items: center;padding: 24px 0;" v-for="(item, index) in secondaryUserList"
              :key="index">

              <div class="dc1-item">
                <!-- 头像 -->
                <img style="border-radius: 50%;width: 48px;height:48px;object-fit: fill;"
                  :src="$staticURL + item.avatar" />
                <div style="font-size: 14px;color: #FF68B2;margin-left: 12px;">
                  <div>{{ item.userName }}</div>
                  <!-- <div style="color: #666666;"></div> -->
                </div>
              </div>
              <div class="dc1-item">
                <div class="dc1-txt">{{ item.contactPhone }}</div>
              </div>
              <div class="dc1-item">
                <div class="dc1-txt">0</div>
                <!-- <div class="dc1-txt1">1</div> -->
              </div>
              <div class="dc1-item">
                <div class="dc1-txt">否</div>
                <!-- <div class="dc1-txt1">是</div> -->
              </div>
              <div class="dc1-item">
                <div class="dc1-txt">无</div>
                <!-- <div class="dc1-txt1">广告内容不合法</div> -->
              </div>
              <div class="dc1-item">
                <el-button class="dc1-txt1" @click="dialogVisible = true">资料详情</el-button>
              </div>
              <el-dialog class="title-img" title="资料信息" :visible.sync="dialogVisible" width="50%"
                :before-close="handleClose">
                <div>
                  <span>
                    详细地址：</span><span>
                    {{ item.addressDetail }}
                  </span>
                </div>
                <div>
                  <span>分销用户发布广告佣金比例：</span>
                  <span>
                    {{ item.advertisementRate }}
                  </span>
                </div>
                <div>
                  <span>广告商户id</span>
                  <span>
                    {{ item.advertisementUserId }}
                  </span>
                </div>
                <div>
                  <span>头像
                  </span>
                  <img :src="$staticURL + item.avatar" alt="加载失败">
                </div>
                <div>
                  <span>可提现余额</span><span>
                    {{ item.balance }}
                  </span>
                </div>
                <div>
                  <span>分销用户购物佣金比例</span>
                  <span>
                    {{ item.buyCommodityRate }}
                  </span>
                </div>
                <div>
                  <span>所在城市</span><span>
                    {{ item.city }}
                  </span>
                </div>
                <div>
                  <span>联系人邮箱</span>
                  <span>{{ item.contactEmail }}</span>
                </div>
                <div>
                  <span>联系人名称</span>
                  <span>{{ item.contactName }}</span>
                </div>
                <div>
                  <span>联系人电话</span>
                  <span>{{ item.contactPhone }}</span>
                </div>
                <div>
                  <span>创建时间</span>
                  <span>{{ item.createTime }}</span>
                </div>
                <div>
                  <span>押金状态</span>
                  <span v-if="item.depositStatus == 0">
                    未缴纳
                  </span>
                  <span v-if="item.depositStatus == 1">
                    已缴纳
                  </span>
                  <span v-if="item.depositStatus == 2">
                    退款
                  </span>
                </div>
                <div>
                  <span>分销用户音视频，打赏，送礼等佣金比例</span>
                  <span>
                    {{ item.distributionRate }}
                  </span>
                </div>
                <div>
                  <span>身份证正面</span>
                  <img :src="$staticURL + item.idcardBack" alt="">
                </div>
                <div>
                  <span>身份证反面</span>
                  <img :src="$staticURL + item.idcardFront" alt="">
                </div>
                <div>
                  <span>
                    是否封禁
                  </span>
                  <span v-if="item.isBanned == 0">否</span>
                  <span v-else-if="item.isBanned == 1">是</span>
                </div>
                <div>
                  <span>
                    是否实名认证
                  </span>
                  <span v-if="item.isRealName == 0">否</span>
                  <span v-else-if="item.isRealName == 1">是</span>

                </div>
                <div>
                  <span>
                    是否启用
                  </span>
                  {{ item.isUse }}
                  <span v-if="item.isUse == 0">否</span>
                  <span v-else-if="item.isUse == 1">是</span>

                </div>

                <div>
                  <span>
                    代理商级别
                  </span>
                  <span>{{ item.level }}</span>
                </div>
                <div>
                  <span>
                    营业执照地址
                  </span>
                  <img :src="$staticURL + item.licenseUrl" alt="图片加载失败">
                </div>
                <div>
                  <span>
                    代理商名称
                  </span><span>
                    {{ item.name }}
                  </span>
                </div>
                <div>
                  <span>
                    应交押金金额
                  </span><span>
                    {{ item.payableDepositMoney }}
                  </span>
                </div>
                <!-- <div>
                  <span>
                    父id{{ item.pid }}
                  </span>
                </div> -->
                <div>
                  <span>
                    实交押金金额
                  </span><span>
                    {{ item.realityDepositMoney }}
                  </span>
                </div>
                <div>
                  <span>
                    奖励金额
                  </span><span>{{ item.rewardMoney }}</span>
                </div>
                <div>
                  
                  <span>
                    审核状态

                  </span>
                  <span v-if="item.status == 1">审核通过
                  </span>
                  <span v-else-if="item.status == 0">
                    审核中
                  </span>
                  <span v-else-if="item.status == -1">
                    审核失败
                  </span>
                </div>
                <div>
                  <span>
                    任务开始时间
                  </span><span>
                    {{ item.tasTime }}
                  </span>
                </div>
                <div>
                  <span>
                    用户id
                  </span><span>
                    {{ item.userId }}
                  </span>
                </div>
                <div>
                  <span>
                    登陆用户名
                  </span><span>
                    {{ item.userName }}
                  </span>
                </div>

                <span slot="footer" class="dialog-footer">
                  <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
                  <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                </span>
              </el-dialog>
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import citys from '@/assets/Cascader.js'
export default {
  name: 'Advertisers',
  data() {
    return {
      cityas: '',
      imageTX: '',
      citys,
      tabList: ['用户信息', '联系方式', '违规', '是否封号', '封号原因', '操作'],
      dialogVisible: false,
      Area: [],
      cityQuery: '',
      areaQuery: [],
      province: "",
      city: '',
      area: "",
      addTitIdx: 1,

      image1: '',
      hintShow: false,
      addShow: false,
      checked: false,
      form: {
        userName: '',
        password: '',
        addressDetail: "",
        advertisementUserId: 0,
        city: "",
        contactEmail: "",
        contactName: "",
        contactPhone: "",
        idcardBack: "",
        idcardFront: "",
        level: 0,
        licenseUrl: "",
        name: ""
      },
      options: [{
        value: '金融',
        desc: '包括银行、保险、基金、证券等',
        id: 1
      }, {
        value: '电商',
        desc: '包括电商平台、跨境电商、品牌电商等',
        id: 2
      }, {
        value: '旅游',
        desc: '包括旅行社、酒店、机票代理等',
        id: 3
      }, {
        value: '教育',
        desc: '包括培训机构、在线教育平台等',
        id: 4
      }, {
        value: '招商加盟',
        desc: '包括餐饮、食品、服装等',
        id: 5
      },
      {
        value: '食品',
        desc: '包括餐饮、零食、饮品等',
        id: 6
      },
      {
        value: '化妆品',
        desc: '包括护肤品、彩妆等',
        id: 7
      },
      {
        value: '小说',
        desc: '包括网络小说、文学平台等',
        id: 8
      },
      {
        value: '游戏',
        desc: '包括游戏平台、游戏开发商等',
        id: 9
      },
      {
        value: '下载',
        desc: '包括各种应用、软件下载等',
        id: 10
      },
      {
        value: '房产',
        desc: '包括房产中介、开发商等',
        id: 11
      },
      {
        value: '珠宝',
        desc: '包括珠宝首饰、鉴定机构等',
        id: 12
      },
      {
        value: 'KTV预定',
        desc: '包括KTV预订平台、KTV商家等',
        id: 13
      },
      {
        value: '婚庆服务',
        desc: '包括婚纱摄影、婚礼策划等',
        id: 14
      },
      {
        value: '医疗',
        desc: '包括医院、诊所、医疗器械等',
        id: 15
      },
      {
        value: '机械',
        desc: '包括机械制造、工业设备等',
        id: 16
      }, {
        value: '物流搬家',
        desc: '包括物流公司、搬家公司等',
        id: 17
      }, {
        value: '古董拍卖',
        desc: '包括拍卖行、鉴定机构等',
        id: 18
      }, {
        value: '装修建材',
        desc: '包括装修公司、建材商家等',
        id: 19
      }, {
        value: '汽车救援',
        desc: '包括汽车救援公司、维修厂等',
        id: 20
      }, {
        value: '法律咨询',
        desc: '包括律师事务所以及法律咨询平台等',
        id: 21
      }, {
        value: '招商加盟类广告',
        desc: '包括招商加盟类广告',
        id: 22
      }, {
        value: '其他',
        desc: '',
        id: 23
      }
      ],
      List: [],
      secondaryUserList: [],


      imageUrl: '',
      imageUrlBack: '',
      imageUrlFront: '',

      licenseUrl: "",
      idcardBack: "",
      idcardFront: "",

      pageSize: 10,
      pageNumber: 1,
    }
  },
  computed: {
    headers() {
      return {
        session_token: localStorage.getItem("adv_session_token"),
        // session_token: '',
      };
    }
  },
  watch: {

  },
  created() {

  },
  mounted() {

    this.Area = require('@/utils/city.json')
    console.log('this.Area', this.Area)

    let advertisementUserMes = JSON.parse(localStorage.getItem('advertisementUserMes'))

    this.advertisementUserId = advertisementUserMes.advertisementUserId

    this.province = advertisementUserMes.city.toString().split('/')[0]

    this.citys.forEach((item) => {
      if (item.label == advertisementUserMes.city) {
        return this.city = item.children
      }
    })
    console.log(this.city, 'ticy');
    this.cityQuery = advertisementUserMes.city


    this.getSponsorList()
  },
  methods: {
    handleCityChange(val) {
      console.log(val, '变化了');
      this.cityas = val
    },

    // 添加代理商
    async getRegister() {
      if (!this.checked) {
        this.$message.error('请先阅读同意协议！')
        return;
      } console.log(this.form, 'form');
      let res1 = await this.$API.members.addSecondaryUser({
        userName: this.form.userName,//账号
        password: this.form.password,//密码
        city: this.cityas,//城市
        contactName: this.form.contactName,//联系人名称
        idcard: this.form.idcard,//身份证号
        contactEmail: this.form.contactEmail,//邮箱
        idcardBack: this.form.idcardBack,//身份证反面
        idcardFront: this.form.idcardFront,//身份证正面
        addressDetail: this.form.addressDetail, //详细地址
        licenseUrl: this.form.licenseUrl,//营业执照地址
        avatar: this.form.avatar,  //头像
        name: this.form.name,  //代理商名称
        contactPhone: this.form.contactPhone, //电话
      });
      console.log('二级广告商注册', res1)
      if (res1.code == 200) {
        this.$message.success('广告商注册成功,3秒后清除表格')
        // this.updateAdvertisementUserMes()
        let timerId = setTimeout(() => {
          this.form = null;
        }, 3000);
        clearTimeout(timerId);
      } else {
        this.$message(res1.msg)
      }

    },
    async updateAdvertisementUserMes() {
      console.log(this.form)
      // if (this.form.level == 1) {
      //   this.form.city = this.province.label + '/' + this.city.label
      // } else if (this.form.level == 2) {
      //   this.form.city = this.province.label + '/' + this.city.label + '/' + this.area.label
      // }
      if (this.form.level == 1) {
        this.form.city = this.provinceForm + '/' + this.cityForm
      } else if (this.form.level == 2) {
        this.form.city = this.provinceForm + '/' + this.cityForm + '/' + this.areaForm
      }
      // console.log(this.form.city)
      let res = await this.$API.members.updateAdvertisementUserMes(this.form)
      console.log('二级代理商信息', res)
      if (res.code == 200) {
        this.$message.success('信息提交审核中！')
        this.checked = false
      } else {
        this.$message(res.msg)
      }
    },
    async getSecondaryUserList() {
      let res = await this.$API.members.getSecondaryUserList({
        pageNumber: 1,
        pageSize: 1000000,
        searchText: '',
      })
      // console.log(res)
      this.secondaryUserList = res.data;
      console.log('代理商列表明细', this.secondaryUserList)
    },


    changeAddTitIdx(i) {
      console.log('切换', i)
      this.addTitIdx = i
      if (this.addTitIdx == 2) {
        this.getSecondaryUserList()
      }
    },


    openUrl(url) {
      window.open(url)
    },
    async deteAds(advertisementSponsorId) {
      let res = await this.$API.members.deleteAdvertisementSponsor({
        advertisementSponsorId,
      })
      if (res.code == 200) {
        this.$message.success('删除成功')
        this.getSponsorList()
      }
    },
    async getSponsorList() {
      let res = await this.$API.members.getSponsorList({
        advertisementUserId: this.advertisementUserId,
        pageNumber: this.pageNumber,
        pageSize: this.pageSize,
        searchText: ''
      })
      console.log(res)
      this.List = res.data.rows
    },
    async addAdvertisementSponsor() {
      if (!this.checked) {
        this.$message.error('请先阅读同意协议！')
        return;
      }
      console.log(this.form)
      return;
      if (this.form.advertisementSponsorId) {
        let res = await this.$API.members.updateAdvertisementSponsor(this.form)
        console.log('修改广告主信息', res)
        if (res.code == 200) {
          this.$message.success('广告主提交审核中！')
          this.form = {}
          this.imageUrl = ''
          this.imageUrlFront = ''
          this.imageUrlBack = ''
          this.licenseUrl = ''
          this.idcardBack = ''
          this.idcardFront = ''
          this.getSponsorList()
          this.addShow = false
        }
      } else {
        let res = await this.$API.members.addAdvertisementSponsor(this.form)
        console.log('新增广告主信息', res)
        if (res.code == 200) {
          this.$message.success('广告主修改审核中！')
          this.form = {}
          this.imageUrl = ''
          this.imageUrlFront = ''
          this.imageUrlBack = ''
          this.licenseUrl = ''
          this.idcardBack = ''
          this.idcardFront = ''
          this.getSponsorList()
          this.addShow = false
        }
      }
    },

    toPut(index) {
      this.$router.push({
        name: 'AdDetail',
        query: {
          index
        }
      })
    },
    handleAvatarSuccessFront(res, file) {
      console.log(res, file)
      this.imageUrlFront = URL.createObjectURL(file.raw);
      this.idcardFront = ''
      if (res.code == 200) {
        this.form.idcardFront = res.data.imgageUrl
      } else {
        this.$message(res.msg)
      }
    },
    handleAvatarSuccessBack(res, file) {
      console.log(res, file)
      this.imageUrlBack = URL.createObjectURL(file.raw);
      this.idcardBack = ''
      if (res.code == 200) {
        this.form.idcardBack = res.data.imgageUrl
      } else {
        this.$message(res.msg)
      }
    },
    handleAvatarSuccess(res, file) {
      console.log(res, file)
      this.imageUrl = URL.createObjectURL(file.raw);
      this.licenseUrl = ''
      if (res.code == 200) {
        this.form.licenseUrl = res.data.imgageUrl
      } else {
        this.$message(res.msg)
      }
    },
    handleTXSuccess(res, file) {
      console.log(res, file)
      // this.imageTX = URL.createObjectURL(file.raw);
      if (res.code == 200) {
        this.imageTX = res.data.imgageUrl
        this.form.avatar = res.data.imgageUrl
        // console.log(this.form.avatar)
      } else {
        this.$message(res.msg)
      }
    },
    addCheck(i) {
      this.addShow = true
      this.hintShow = false
      console.log(i)
      if (i >= 0) {
        console.log('编辑', this.List[i], this.form)
        this.form.advertisementSponsorId = this.List[i].advertisementSponsorId
        this.form.corporationIdcard = this.List[i].corporationIdcard
        this.form.corporationName = this.List[i].corporationName
        this.form.email = this.List[i].email
        this.form.enterpriseName = this.List[i].enterpriseName
        this.form.industryType = this.List[i].industryType
        this.form.phone1 = this.List[i].phone1
        this.form.phone2 = this.List[i].phone2
        this.form.unionCode = this.List[i].unionCode

        this.licenseUrl = this.List[i].licenseUrl
        this.idcardBack = this.List[i].idcardBack
        this.idcardFront = this.List[i].idcardFront
      } else {
        this.form = {}
        this.licenseUrl = ''
        this.idcardBack = ''
        this.idcardFront = ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.order_content {
  padding: 30px;
}

.title-img img {
  width: 50px;
}


.el-dialog__body>div {
  display: flex;
  font-weight: bold;
  margin-top: 30px;
  margin-left: 40px;

  // .el-dialog__body>div>span:first-of-type {
  //   color: #f40;
  //   width: 300px;
  // }
}

.el-dialog__body>div>span:first-of-type {
  width: 300px;
}

.order_content .order_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.order_content .order_title {
  font-size: 30px;
}

.order_content .order_add_btn {
  font-size: 18px;
  // color: #10a4a4;
  color: #FF68B2;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.order_content .order_add_btn img {
  width: 21px;
  height: 21px;
  margin-right: 5px;
}

.order_box {
  display: flex;
  flex-direction: column;
  padding: 15px 0;
}

.order_box .order_item {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 212px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 4px 0 #ccc;
  margin: 15px 0;
}

.order_box .order_item .item_left {
  flex: 4;
  min-height: inherit;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  padding: 30px;
  box-sizing: border-box;
  font-size: 18px;
  color: #333;
  font-family: source;
  background-color: #fff;
}

.order_box .order_item .item_left img {
  position: absolute;
  right: -60px;
  top: -60px;
}

.order_box .order_item .item_left div {
  padding-right: 20px;
  box-sizing: border-box;
}

.order_box .order_item .item_left span {
  width: 80px;
  display: inline-block;
}

.order_box .order_item .item_right {
  flex: 1;
  cursor: pointer;
  min-width: max-content;
  min-height: inherit;
  color: #fff;
  font-size: 30px;
  background-color: #FF68B2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item_right:hover,
.order_add_btn:hover,
.add_title>div:nth-child(2):hover {
  opacity: 0.8;
}

.order_add {
  padding: 0px 30px;
}

.order_add .add_titleN {
  display: flex;
  align-items: center;
  // justify-content: space-between;
  margin-bottom: 40px;

  .tit1 {
    font-size: 30px;
    color: #666666;
  }

  .tit2 {
    font-size: 30px;
    color: #666666;
    margin-left: 40px;
  }
}

.order_add .add_box {
  background: #fff;
  box-shadow: 0 1px 4px 0 #0000003f;
  width: 100%;
  min-height: 700px;
  margin: 0 auto;
  padding: 30px;
  box-sizing: border-box;
}

.order_add .add_box ::v-deep .el-form {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  /* justify-content: space-between; */
}

.order_add .add_box ::v-deep .el-form .el-form-item {
  max-width: 33%;
  min-width: 340px;
  width: 100%;
  padding: 0 15px;
  box-sizing: border-box;
}

.order_add .add_box ::v-deep .el-form .el-form-item__label {
  font-size: 18px;
  font-weight: normal;
  color: #333333;
}

.order_add .add_box ::v-deep .el-form .el-upload {
  margin: 10px 0;
  margin-right: 20px;
  flex-direction: column;
}

.order_add .add_box .el-input {
  // width: 240px;
  min-width: 200px;
  // max-width: 100%;
}

.order_add .add_box div ::v-deep .el-input .el-input__wrapper {
  background: #eee;
  border: unset;
  box-shadow: unset;
}

.order_add .agree_box {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #666;
}

.order_add .agree_box span {
  color: #1B4187;
  cursor: pointer
}

.order_add .add_btn {
  width: 468px;
  height: 54px;
  margin: 0 auto;
  background-color: #FF68B2;
  color: #fff;
}

.hint_bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  background: #00000080;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hint_bg .hint_box {
  background: #fff;
  border-radius: 20px;
  height: 180px;
  width: 400px;
}

.hint_bg .hint_box div {
  font-size: 20px;
  color: #333;
  height: 90px;
  line-height: 90px;
  text-align: center;
  cursor: pointer;
}

.hint_bg .hint_box div:hover {
  color: #10a4a4;
}

.uploadEL ::v-deep .el-upload .el-upload-dragger {
  width: 260px !important;
  height: 146px !important;
}

.order_add .agree_box ::v-deep .el-checkbox__inner {
  width: 15px !important;
  height: 15px !important;
}

.order_add .agree_box ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: rgb(255, 104, 178) !important;
  border-color: rgb(255, 104, 178) !important;
}

.uploadELImg {
  width: 260px !important;
  height: 146px !important;
}







.dc1-top {
  background: #F3F3F3;
  width: 100%;
  height: 55px;
  display: flex;
  align-items: center;
}

.dc1-item {
  width: 20%;
  margin-left: 50px;
  display: flex;
  align-items: center;
}

.dc1-txt {
  font-size: 14px;
  color: #333333;
}

.dc1-txt1 {
  font-size: 14px;
  color: #FF68B2;
}


.img-tx {
  width: 68px;
  height: 68px;
  border-radius: 50%;
}

.uploadTX ::v-deep .el-upload .el-upload-dragger {
  width: 68px !important;
  height: 68px !important;
  border-radius: 50% !important;
}


.msg-tip {
  width: 700px;
  padding: 5px;

  div {
    margin: 10px 0;
    font-size: 16px;
    color: #666666;
  }

  span {
    color: #f40;
  }

  img {
    width: 95%;
  }
}
</style>

<style lang="scss">
// 处理提示框的颜色
.atooltip.el-tooltip__popper {
  background: rgba(255, 255, 255, 1) !important;
  // box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 1px 0px 6px 0px rgba(0, 0, 0, 0.3);
  border-radius: 15px;
  border: none;

  &>div {
    color: gray !important;
  }
}

// 处理箭头的颜色
.atooltip.el-tooltip__popper .popper__arrow {
  border: none;
  background: rgba(255, 255, 255, 1) !important;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
}
</style>
